<template>
  <el-dialog
    title="审批人绑定"
    :visible.sync="dialogVisible"
    width="40%"
    :close-on-click-modal="false"
    center
    :before-close="handleClose"
  >
    <div style="text-align: center">
      <el-transfer
        v-model="boundIds"
        :data="dataList"
        :titles="['未绑定用户', '已绑定用户']"
        :props="{
          key: 'id',
          label: 'username'
        }"
        filterable
        :filter-method="filterMethod"
        filter-placeholder="请输入用户名"
        style="text-align: left; display: inline-block"
        @change="bindingChange"
      >
      </el-transfer>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button @click="handleClose">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
import processNodeApi from '@/api/common/processNodeApi'
import processApi from '@/api/common/processApi'

export default {
  name: 'BindingApprover',
  props: {
    dialogVisible: {
      type: Boolean,
      default: false
    },
    processId: Number,
    processNodeId: Number
  },
  data() {
    return {
      dataList: [],
      boundIds: []
    }
  },
  watch: {
    dialogVisible() {
      if (this.dialogVisible && this.processNodeId) {
        this.getBoundUsers()
      }
    },
    processId() {
      if (this.processId) {
        this.getUserList()
      }
    }
  },
  methods: {
    getUserList() {
      processApi.getExecutorOrgUserList(this.processId).then(res => {
        this.dataList = res.data
      })
    },
    filterMethod(query, item) {
      return item.username.includes(query)
    },
    bindingChange(value, direction, movedKeys) {
      const optType = direction === 'right' ? 'add' : 'update'
      processNodeApi.configProcessNodeForUsers(this.processNodeId, optType, movedKeys).then(res => {
        this.$message({
          message: '操作成功！',
          type: 'success'
        })
        this.getBoundUsers()
      })
    },
    getBoundUsers() {
      processNodeApi.getBoundUsers(this.processNodeId).then(res => {
        this.boundIds = res.data
      })
    },
    handleClose() {
      this.$emit('update:dialogVisible', false)
    }
  }
}
</script>

<style scoped>

</style>
